﻿<template>
  <div class="wms-warehouse-location-view-page" ref="page" :style="{height:pageHeight}">
    <a-spin :spinning="loading">
      <div class="top-blcok">
        <search-form ref="search" :loading.sync="loading" @search="onSearch" />
      </div>
      <div class="containter-blcok">
        <div class="example-tags">
          <div class="tag red-tag">锁定</div>
          <div class="tag primary-tag">有货</div>
          <div class="tag warning-tag">空托盘</div>
          <div class="tag">无货</div>
        </div>
        <!-- 库区显示区域 start -->
        <div class="locations-box">
          <div class="location-items-group">
            <div class="location-item" v-for="(item,index) in list" :key="'location-item-'+index" @click.stop="openDetail(item)" :class="[
              item.islock?'disabled-item':(
                (item.placestatus===1||item.placestatus===2)?'':(item.emptyContainer?'carrier-item':'primary-item')
              )
            ]">
              {{item.placecode}}
            </div>
          </div>
        </div>
        <!-- 库区显示区域 end -->
      </div>
      
      <detail-drawer :visible.sync="detailVisible" :row="detailRow" @callback="lockCallback" />
    </a-spin>
  </div>
</template>

<script>
import SearchForm from './SearchForm.vue'
import DetailDrawer from './DetailDrawer.vue'
import { GetPalceList } from '@/api/modular/main/LocationViewManage'
export default {
  name:'wmsWarehouseLocationViewPage',
  components:{SearchForm,DetailDrawer},
  data(){
    return {
      pageHeight:'100%',
      detailVisible:false,
      detailRow:{},
      loading:false,
      list:[],
      searchForm:{}
    }
  },
  watch:{
    '$store.state.app.multiTab':{
      deep:true,
      handler:(newVal,oldVal)=>{
        this.calPageHeight(newVal)
      }
    }
  },
  methods:{
    calPageHeight(hasTab){
      if (hasTab) {
       let _h = this.$refs.page.clientHeight;
       if (_h) {
         this.pageHeight = (_h-42)+'px'
       }
      } else {
        this.pageHeight = '100%';
      }
    },
    initPageHeight(callback){
      setTimeout(()=>{
        this.calPageHeight(this.$store.state.app.multiTab)
        callback && callback()
      },100)
    },
    openDetail(obj){
      this.detailRow = obj
      this.detailVisible = true;
    },
    getList(params,callback){
      GetPalceList(params).then((d)=>{
        this.list = d.data.palceDetails || []
        callback && callback(true)
      }).catch(()=>{
        callback && callback(false)
      })
    },
    onSearch(valObj) {
      this.loading = true
      this.searchForm = valObj
      this.getList(valObj,()=>{
        this.loading = false
      })
    },
    lockCallback(){
      this.loading = true
      this.getList(this.searchForm,()=>{
        this.loading = false
      })
    },
    init(){
      this.initPageHeight(()=>{
        this.loading = true
        this.$refs.search.init((f,valObj)=>{
          if (f) {
            this.searchForm = valObj
            this.getList(valObj,()=>{
              this.loading = false
            })
          } else {
            this.loading = false
          }
        })
      })
    }
  },
  mounted(){
    this.init()
  }
}
</script>

<style lang="less" scoped>
.wms-warehouse-location-view-page{
  overflow: hidden;
  display: flex;
  overflow: auto;
  background-color:#fff;
  border-radius:10px;
  flex-direction: column;
  .top-blcok{
    flex-shrink: 0;
    padding:10px 16px 16px 16px;
  }
  .containter-blcok{
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    @danger-color:#ff3333;
    @primary-color:#ccffff;
    @warning-color:#fffacd;
    @border-color-x:#c0c0c0;
    .example-tags{
      flex-shrink: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      padding:0 16px 16px 16px;
      .tag{
      	display: flex;
      	align-items: center;
      	justify-content: center;
      	height: 30px;
      	width: 100px;
      	border: 1px solid @border-color-x;
      	border-radius: 4px;
      	cursor: default;
      	&+.tag{
      		margin-left: 10px;
      	}
      	&.red-tag{
      		background-color: @danger-color;
      		color: #FFFFFF;
      	}
      	&.primary-tag{
      		background-color: @primary-color;
      	}
      	&.warning-tag{
      		background-color: @warning-color;
      	}
      }
    }
    .locations-box{
       flex-grow: 1;
       overflow: auto;
       .location-items-group{
         padding:0 0 0 16px;
         display:flex;
         flex-wrap: wrap;
         .location-item {
           display: flex;
           align-items: center;
           justify-content: center;
           width:120px;
           height:50px;
           overflow:hidden;
           white-space:nowrap;
           margin-bottom: 16px;
           margin-right: 16px;
           border: 1px solid @border-color-x;
           border-radius: 4px;
           cursor: pointer;
           &.active{
           	box-shadow: 0 0 4px #00ff00;
           }
           &.primary-item{
           	background-color: @primary-color;
           }
           &.carrier-item{
           	background-color: @warning-color;
           }
           &.disabled-item{
           	background-color: @danger-color;
           	color: #FFFFFF;
           }
         }
       }
    }
  }
}
</style>
<style lang="less">
.wms-warehouse-location-view-page{
  .ant-spin-nested-loading,.ant-spin-container{
    height:100%;
  }
  .ant-spin-container{
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
}
</style>
